<!--
 * @Author: 蔡继周
 * @Date: 2021-11-09 21:55:49
 * @LastEditTime : 2021-12-16 14:07:25
 * @LastEditors  : Shaquille.Cai
 * @Description: I have to do something...
 * @FilePath     : \\vue3-admin-with-blog\\src\\views\\Login.vue
-->

<script>
import { defineComponent, reactive, ref, toRefs, inject } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "Login",
  setup() {
    const userFormDom = ref(null);
    const store = useStore();
    const router = useRouter();
    const state = reactive({
      user: {
        userName: "admin",
        password: "123456",
      },
      rules: {
        userName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    });
    const handleLogin = () => {
      userFormDom.value.validate((isValidate) => {
        if (isValidate) {
          store.dispatch("moduleInfo/login", state.user).then(() => {
            router.push("./Welcome");
          });
        }
      });
    };
    return {
      ...toRefs(state),
      handleLogin,
      userFormDom,
    };
  },
});
</script>


<template>
  <div class="container">
    <div class="header" />
    <div class="backgroundCtn" />
    <el-card class="box-card" id="demo">
      <div class="card_header">请登录</div>
      <div style="width: 100%">
        <el-form ref="userFormDom" :model="user" status-icon :rules="rules">
          <el-form-item prop="userName">
            <el-input
              type="text"
              prefix-icon="el-icon-user"
              v-model="user.userName"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              prefix-icon="el-icon-view"
              v-model="user.password"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="btn-login"
              style="width: 100%"
              @click="handleLogin"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  min-height: 100vh;
}
.header {
  background: url("@/assets/images/logo.png") no-repeat center;
  width: 100%;
  padding: 5rem 0;
  background-size: 8rem;
}
.backgroundCtn {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: left bottom, right bottom;
  background-size: calc((100vw - 40rem) / 2), calc((100vw - 40rem) / 2), cover;
  background-image: url("@/assets/images/left.svg"),
    url("@/assets/images/right.svg");
}

.box-card {
  width: 350px;
  .card_header {
    width: 100%;
    text-align: center;
    margin: 30px 0;
    font-size: 25px;
  }
}
</style>